<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json 速览</title>
</head>
<body>
    <header>
        <h1>SVG 重要概念练习</h1>
    </header>
    <main>
        <section>
            <h2>引入SVG的三种方式</h2>
            <p><iframe src="https://svgsilh.com/svg_v2/639149.svg" frameborder="0" width="200px"></iframe> <img src="https://svgsilh.com/svg_v2/639149.svg" alt="" width="200px">  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
                <rect width="200" height="200" fill="#ccc" />
            </svg></p>
        
        </section>
        <section>
            <h2>重要概念</h2>
            <p>
                坐标系及用户坐标系
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200" style="background-color: aquamarine;">
                    <rect width="50" height="50" x="10" y="10" fill="#ccc"></rect>

                </svg>
            </p>
        </section>
        <section>
            <h2>形状</h2>
            <p>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
                <line x1="0" y1="0"
                      x2="200" y2="200"
                      stroke="#ccc"
                      stroke-width=""/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <circle cx="100" cy="50" r="40" stroke="black"
                    stroke-width="1" fill="#ccc"/>
                  </svg>
                  <svg height="200" width="200">
                    <polygon points="100,10 200,190 100,200"
                      style="fill:#ccc;stroke:black;stroke-width:1"/>
                    </svg>
            </p>
        </section>
        <section>
            <h2>文字</h2>
            <p>
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <text x="10" y="20" style="fill:black;">多行文字:
                      <tspan x="10" y="45">第一行</tspan>
                      <tspan x="10" y="70">第二行</tspan>
                    </text>
                  </svg>
            </p>
        </section>
    </main>
</body>
</html>